<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>14五星评分案例</title>
</head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .comment {
            font-size: 40px;
            color: #963210;
        }
        .comment li {
            float: left;
        }
        ul {
            list-style: none;
        }
    </style>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

    <script src="../jquery-3.2.1.js"></script>
    <script>
        $(function(){
           // 给li注册鼠标经过事件 让自己和前面的所有兄弟变成实心
           var wjx_k = "☆";
           var wjx_s = "★" ;

           $(".comment>li").on("mouseenter", function(){
            //    $(this).text(wjx_s).prevAll().text(wjx_s);   // 鼠标经过前面的都是实心
            //    $(this).nextAll().text(wjx_k)        // 鼠标经过后面的都是空心

                // 上面的不能继续链式下去 想要继续链式 调用end()方法 回到刚开始的状态才可以
                $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
           });

           $(".comment").on("mouseleave", function(){   
               $(this).children().text(wjx_k);  // 鼠标离开后就全部为空
                // 检测到有current 就是点击了 然后让点击前面包含自己都变成实星
                $("li.current").text(wjx_s).prevAll().text(wjx_s);
           });  

           $(".comment>li").on("click", function(){
               // 如果点击了 加上 current class 其他的兄弟就移除
               $(this).addClass("current").siblings().removeClass("current");
           })

        });
    
    
    </script>
</body>
</html>